import { FlashList } from "@shopify/flash-list";
import { StyleSheet, Text, View } from "react-native";
import FastImage from "react-native-fast-image";
import { __formatNumber } from "../common/utils";
import apiService from "../services/ApiServices";
import React, { useEffect, useRef, useState } from "react";
import EmptyView from "./EmptyView";

interface SearchCartoonRouteProps {
  searchText: string;
}

const SearchCartoonRoute: React.FC<SearchCartoonRouteProps> = ({ searchText }) => {
  const [cartoonList, setCartoonList] = useState<any[]>([]);
  const pageRef = useRef<number>(1);

  useEffect(() => {
    const fetchData = async () => {
      const data = await searchCartoon(searchText);
      setCartoonList(data.list);
    };
    fetchData();
  }, [searchText]);

  const searchCartoon = async (text: string): Promise<any> => {
    const result = await apiService.searchCartoonList(text, pageRef.current);
    return result?.data;
  };

  const renderItem = (item: any) => {
    console.log(JSON.stringify(item));
    return (
      <View style={styles.contentView}>
        <FastImage
          resizeMode="cover"
          style={styles.coverImage}
          source={{ uri: item.avatar }}
        >
        </FastImage>
        <View style={styles.rightView}>
           <View>
             <Text style={styles.nameLabel}>{item.name}</Text>
             <Text style={styles.nicknameLabel}>@{item.user.nickname}</Text>
             <Text numberOfLines={2} style={styles.summaryLabel}>{item.summary}</Text>
           </View>
           <Text style={styles.numLabel}>{__formatNumber(item.useNum)}互动 · {__formatNumber(item.fansNum)}粉丝</Text>
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={cartoonList}
        renderItem={({ item }) => renderItem(item)}
        keyExtractor={(item) => item.id.toString()}
        estimatedItemSize={120}
        ListEmptyComponent={() => <EmptyView />}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  contentView: {
    height: 120,
    backgroundColor: "white",
    marginHorizontal: 12,
    marginVertical: 8,
    borderRadius: 16,
    elevation: 1,
    shadowColor: "black",
    shadowRadius: 1,
    shadowOpacity: 0.1,
    shadowOffset: { width: 1, height: 1 },
    flexDirection: "row",
    justifyContent: "space-between",
  },
  coverImage: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginLeft: 10,
    marginTop: 10,
    resizeMode: "cover",
    overflow: "hidden",
  },
  rightView: {
    borderRadius: 16,
    marginLeft: 10,
    marginRight: 10,
    backgroundColor: "white",
    flex: 1,
    justifyContent: "space-between",
  },
  nameLabel: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: "bold",
    color: "black",
  },
  summaryLabel: {
    marginTop: 6,
    fontSize: 14,
    color: "rgba(0,0,0,0.67)",
  },
  nicknameLabel: {
    color: "rgba(0,0,0,.3)",
    marginTop: 4,
    fontSize: 14,
  },
  numLabel: {
   marginBottom: 6,
   fontSize: 14,
   color: 'rgba(0,0,0,.45)'
  }
});

export default SearchCartoonRoute;